<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>表单提交</title>
    <script th:src="@{js/jQuery.1.7.1.min.js}"></script>
    <script th:src="@{js/common.js}"></script>
</head>
<body>
    <h1>表单提交页面</h1>
    <div id="uploadProgress"></div>
    <form id="uploadForm" th:action="@{upload}" method="post" enctype="multipart/form-data">
        姓名：<input id="name" name="name" /><br />
        上传文件：<input id="file" type="file" name="file" multiple="multiple"/><br />
        <input id="upload" type="button" value="上传"/>
    </form>
    <script type="application/javascript">
        $("#upload").click(function(){
            alert("asda");
            upload();
        });
        function upload(){
            if (!window.FormData){
                alert('您的浏览器不支持第二代XmlHttpRequest');
                return;
            }
            var af = new AjaxForm({
                id: "uploadForm",
                url: 'upload',
                method: 'POST',
                timeout: 50000,
                onTimeout: function(event){
                    alert('It is timeout.');
                },
                onProgress: function(loaded, total){
                    var complete = (loaded / total * 100 | 0)+"%";
                    var progress = document.getElementById('uploadProgress');
                    progress.value = complete;
                    progress.innerHTML = complete;
                },
                onComplete: function(result){
                    alert(result);
                }
            });
            af.request();
        }
    </script>
</body>
</html>